<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/bootstrapStyle/img/favicon.ico">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/style.min.css?v=4.0.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
<link href="${pageContext.request.contextPath }/bootstrapStyle/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrapStyle/css/jquery-confirm.css"/>
<title>套餐列表</title>
</head>
<body>
    <%-- <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>套餐列表</h5>
                    </div>
                   
                    <div class="ibox-content">
                    	<!-- <div class="">
                            <a onclick="#" href="javascript:void(0);" class="btn btn-primary "><i class="glyphicon glyphicon-plus" aria-hidden="true">添加套餐</i></a>
                        </div> -->
                        <table class="table table-striped table-bordered table-hover dataTables-example" id="packageable">
                            <thead>
                                <tr>
                                	<th>ID</th>
                                    <th>套餐名称</th>
                                    <th>套餐金额</th>
                                    <th>套餐详情</th>
                                    <th>套餐持续时长</th>
                                    <th>套餐操作时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<c:forEach items="${packageList}" var="packagelist" varStatus="packagevar">
                            		<tr class="gradeX">
                            			<td>${packagelist.packageid}</td>
                            			<td>${packagelist.packagename}</td>
	                                    <td>${packagelist.packagenumber}</td>
	                                    <td>${packagelist.packageabs}</td>
	                                    <td>${packagelist.packagesustime}</td>
	                                    <td>${packagelist.packageoperatetime}</td>
	                                    <td><fmt:formatDate value="${packagelist.packagestime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
	                                    <td><fmt:formatDate value="${packagelist.packageetime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
	                                    <td class="center">
	                                    	<a class="J_menuItem" href="${pageContext.request.contextPath }/Main/packageMan/packageSet.action?id=${packagelist.packageid}"><i class="glyphicon glyphicon-edit" aria-hidden="true">修改</i></a>
	                                    </td>
                                	</tr>
                            	</c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div> --%>
    <table id="packagetab" class="table table-hover"></table>
	
	<div class="modal inmodal fade" id="PackageModal" tabindex="-1" role="dialog"  aria-hidden="true">
    	<div class="modal-dialog modal-lg" style="width:1000px;">
        	<div class="modal-content">
            	<div class="modal-header">
                	<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改项目</h4>
               	</div>
                <div class="modal-body">
                	<input type="hidden" id="packageid"/>
                	<div class="form-group draggable">
						<label class="control-label">套餐名称：</label>
                        <input type="text" name="packagename" id="packagename" class="form-control" placeholder="请输入套餐名，字数5-20">
                   	</div>
                    <div class="form-group draggable">
                    	<label class="control-label">套餐数额：</label>
                        <input type="text" onkeyup="num(this)" name="packagenumber" id="packagenumber"  class="form-control" placeholder="请输入套餐数额，数额大于零">
                    </div>
                    <div class="form-group draggable">
                    	<label class="control-label">套餐持续时长：(单位/天)</label>
                        <input type="text" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"  
    onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" name="packagesustime" id="packagesustime"  class="form-control" placeholder="套餐持续时间，单位为（天）">
                    </div>
                    <div class="form-group draggable">
                    	<label class="control-label">套餐操作时间：</label>
                        <input type="text" name="packageoperatetime" id="packageoperatetime" class="form-control" placeholder="描述套餐操作时间，如几月几日星期几上午几点，字数5-20">
                    </div>
                    <div class="form-group draggable">
                    	<label class="control-label">套餐详情：</label>
                        <textarea name="packageabs" onkeyup="words_deal('packageabs');" id="packageabs" rows="6" class="form-control" placeholder="请输入套餐详情,字数在10-150"></textarea>
                    </div>
                </div>
				<div class="modal-footer">
                	<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                	<button type="button" class="btn btn-primary" onclick="PackageSetSubmit()" id="PackageSetSubmit">提交</button>
           		</div>
           	</div>
        </div>
	</div>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath }/bootstrapStyle/js/jquery-confirm.js"></script>
    <script>
	  	//根据窗口调整表格高度
	    $(window).resize(function() {
	        $('#packagetab').bootstrapTable('resetView', {
	            height: tableHeight()
	        })
	    })
	    //查询按钮事件
	    $('#search_btn').click(function(){
	        $('#packagetab').bootstrapTable('refresh');
	    })
	    //tableHeight函数
	    function tableHeight(){
	        //可以根据自己页面情况进行调整
	        return $(window).height() -210;
	    }
	  	function refreshTab(){
	  		$('#packagetab').bootstrapTable('refresh');
	  	}
	  	//生成用户数据
	    $('#packagetab').bootstrapTable({
	        method: 'get',
	        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
	        url:"${pageContext.request.contextPath}/Main/packageMan/packageListAjax.action",//要请求数据的文件路径
	        height:tableHeight(),//高度调整
	        striped: true, //是否显示行间隔色
	        dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
	        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
	        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
	        pageNumber: 1, //初始化加载第一页，默认第一页
	        pagination:true,//是否分页
	        queryParamsType:'limit',//查询参数组织方式
	        queryParams:function(params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的    
	            return {//这里的params是table提供的    
	                offset : params.offset,//从数据库第几条记录开始    
	                limit : params.limit,
	                //type:null
	            //找多少条    
	            };},//请求服务器时所传的参数
	        sidePagination:'server',//指定服务器端分页
	        pageSize:10,//单页记录数
	        pageList:[1,5,10,30,50,100],//分页步进值
	        showRefresh:true,//刷新按钮
	        showColumns:true,
	        clickToSelect: true,//是否启用点击选中行
	        toolbarAlign:'right',//工具栏对齐方式
	        buttonsAlign:'right',//按钮对齐方式
	        toolbar:'#toolbar',//指定工作栏
	        columns:[
	            {
	                title:'全选',
	                field:'select',
	                //复选框
	                checkbox:true,
	                width:25,
	                align:'center',
	                valign:'middle'
	            },
	            {
	                title:'套餐ID',
	                field:'packageid',
	                visible:true
	            },
	            {
	                title:'套餐名称',
	                field:'packagename',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'套餐单价',
	                field:'packagenumber',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'套餐持续时长',
	                field:'packagesustime',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'套餐操作时间',
	                field:'packageoperatetime',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'套餐详情',
	                field:'packageabs',
	                sortable:true,
	                formatter:nullChange
	            },
	            {
	                title:'操作',
	                field:'operate',
	                align:'center',
	                //列数据格式化
	                formatter:operateConfirm
	            }
	        ],
	        locale:'zh-CN',//中文支持,
	        responseHandler:function(rows){
	            //在ajax获取到数据，渲染表格之前，修改数据源
	            return rows;
	        }
	    })
	    //对所有空值规格化，null-》未填写
	    function nullChange(value,row,index){
			if(value=='null' || value==''){
				return '未填写'
			}else{
				return value;
			}
		}
	    //操作序列规则化
    	function operateConfirm(value,row,index){
      		var packageid=row.packageid;
      		var packagename="'"+row.packagename+"'";
      		var packagenumber="'"+row.packagenumber+"'";
      		var packagesustime="'"+row.packagesustime+"'";
      		var packageoperatetime="'"+row.packageoperatetime+"'";
      		var packageabs="'"+row.packageabs+"'";
    		return '<button class="btn btn-primary" style="height:30px" onclick="Edit('+packageid+','+packagename+','+packagenumber+','+packagesustime+','+packageoperatetime+','+packageabs+')">修改</button>&nbsp;&nbsp;<button class="btn btn-warning" style="height:30px" onclick="Delete('+packageid+')">删除</button>';
    	}
	  	function Edit(packageid,packagename,packagenumber,packagesustime,packageoperatetime,packageabs){
	  		var param = "packageid="+packageid+"&packagename="+packagename+"&packagenumber="+packagenumber+"&packagesustime="+packagesustime+"&packageoperatetime="+packageoperatetime+"&packageabs="+packageabs;
	  		//alert(param);
	  		$("#packageid").val(packageid);
      		$("#packagename").val(packagename);
      		$("#packagenumber").val(packagenumber);
      		$("#packagesustime").val(packagesustime);
      		$("#packageoperatetime").val(packageoperatetime);
      		$("#packageabs").val(packageabs);
      		$("#PackageModal").modal("show");
	  	}
	  	function Delete(packageid){
	  		$.confirm({
    		    title: '提示!',
    		    content: '你确定删除该套餐？',
    		    type: 'blue',
    		    typeAnimated: true,
    		    buttons: {
    		    	确定: function () {
    		    		$.ajax({
    		        		type:'post',
    		        		url:"${pageContext.request.contextPath}/Main/packageMan/DeletePackage.action",
    		        		data:"packageid="+packageid,
    		        		async: true,
    		        		success:function(data){
    		        			$.alert(data.msg);
    		        			if(data.code==100){
    		        				refreshTab();
    		        			}
    		        		},error:function(request){
    		        			$.alert("向服务器请求失败！");
    		        		}
    		        	})
    		    	},
    				取消: function () {},
    		    }	
    		});
	  	}
	  	function PackageSetSubmit(){
	  		var packageid = $("#packageid").val();
      		var packagename = $("#packagename").val();
      		var packagenumber = $("#packagenumber").val();
      		var packagesustime = $("#packagesustime").val();
      		var packageoperatetime = $("#packageoperatetime").val();
      		var packageabs =$("#packageabs").val();

      		var param = "packageid="+packageid+"&packagename="+packagename+"&packagenumber="+packagenumber+"&packagesustime="+packagesustime+"&packageoperatetime="+packageoperatetime+"&packageabs="+packageabs;
      		$.confirm({
    		    title: '提示!',
    		    content: '你确定修改该项目？',
    		    type: 'blue',
    		    typeAnimated: true,
    		    buttons: {
    		    	确定: function () {
    		    		$.ajax({
    		        		type:'post',
    		        		url:"${pageContext.request.contextPath}/Main/packageMan/packageEditSubmit.action",
    		        		data:param,
    		        		async: true,
    		        		success:function(data){
    		        			$.alert(data.msg);
    		        			if(data.code==100){
    		        				refreshTab();
    		        				$("#PackageModal").modal("hide");
    		        			}
    		        		},error:function(request){
    		        			$.alert("向服务器请求失败！");
    		        		}
    		        	})
    		    	},
    				取消: function () {},
    		    }	
    		});
	  	}
        /* $(document).ready(function(){
        	$(".dataTables-example").dataTable();
        });
        function AddPackage(){
        	$.confirm({
    		    title: '新增套餐',
    		    boxWidth: '500px',
    		    useBootstrap: false,
    		    content: '' +
    		    '<form action="" role="form">' +
    		    '<div class="form-group">' +
    		    '<label>套餐名称</label>' +
    		    '<input type="text" placeholder="套餐名称" class="packagename form-control" style="width:200px;" required />' +
    		    '</div>' +
    		    '<div class="form-group">' +
    		    '<label>套餐金额</label>' +
    		    '<input type="number" placeholder="套餐金额" min="1" class="packagenumber form-control" style="width:200px;" required />' +
    		    '</div>' +
    		    '<div class="form-group">' +
    		    '<label>套餐详情</label>' +
    		    '<textarea type="text" placeholder="套餐详情（可不填）" rows="3" class="packageabs form-control" style="width:400px;" required ></textarea>' +
    		    '</div>' +
    		    '</form>',
    		    buttons: {
    		        formSubmit: {
    		            text: '提交',
    		            btnClass: 'btn-blue',
    		            action: function () {
    		            	var packagename = this.$content.find('.packagename').val();
    		            	var packagenumber = this.$content.find('.packagenumber').val();
    		            	var packageabs = this.$content.find('.packageabs').val();
    		            	if(!packagename || !packagenumber){
    		            		$.alert('填写信息不可为空！');
    		            		return false;
    		            	}
    		            	if(packagenumber<=0){
    		                	$.alert('金额数不可小于零！');
    		                	return false;
    		                }
    		            	$.ajax({
	    		        		type:"post",
	    		        		url:"${pageContext.request.contextPath}/Main/packageMan/packageSetSubmit.action",
	    		        		contentType:"application/json;charset=utf-8",
	    		        		async: true,
	    		        		data:'{"packagename":"'+packagename+'","packagenumber":"'+packagenumber+'","packageabs":"'+packageabs+'","hospid":"'+hospid+'"}',
	    		        		success:function(data){
	    		        			if(data!=0 || data!=-1){
		    		        			$("#packageable").dataTable().fnAddData([
		    		                		data,
		    		                		packagename,
		    		                		packagenumber,
		    		                		packageabs,
		    		                		"<a class='J_menuItem' href='${pageContext.request.contextPath }/Main/packageMan/packageSet.action?id="+data+"'><i class='glyphicon glyphicon-edit' aria-hidden='true'>修改</i></a>"
		    		                	])
	    		        			}else{
	    		        				$.alert('新增失败！');
	    		        			}
	    		        		},
	    		        		error:function(request){
	    		        			$.alert("连接异常");
	    		        		}
		                	});
    		            }
    		        },
    		        	关闭: function () {
    		        },
    		    },
    		});
        } */
        function num(obj){
        	obj.value = obj.value.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
        	obj.value = obj.value.replace(/^\./g,""); //验证第一个字符是数字
        	obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
        	obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        	obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入两个小数
        }
    	function words_deal(id){
        	var value=$('#'+id).val().length;
	        if(value>150){
	        	var num=$('#'+id).val().substr(0,150);
	        	$('#'+id).val(num);
	        	//alert("超过字数限制，多出的字将被截断！" );
	        }
        }
	</script>
</body>
</html>